<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>订单管理</title>
    <style>
        table { width: 100%; border-collapse: collapse; margin-top: 30px; }
        th, td { border: 1px solid #eee; padding: 12px; text-align: center; }
        th { background: #f5f5f5; }
        .order-btn { background: #5a3ec8; color: #fff; border: none; border-radius: 10px; padding: 6px 18px; cursor: pointer; }
        .order-btn:hover { background: #764ba2; }
        #reviewModal {
            display: none;
            position: fixed;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            background: #fff;
            border-radius: 18px;
            box-shadow: 0 8px 40px rgba(90,62,200,0.18), 0 1.5px 8px #b3a6e6;
            padding: 36px 32px 28px 32px;
            min-width: 320px;
            max-width: 90vw;
            min-height: 120px;
            z-index: 9999;
            animation: modalFadeIn 0.25s;
        }
        @keyframes modalFadeIn {
            from { opacity: 0; transform: translate(-50%, -60%);}
            to   { opacity: 1; transform: translate(-50%, -50%);}
        }
        #reviewModal .modal-title {
            font-size: 22px;
            font-weight: 700;
            color: #5a3ec8;
            margin-bottom: 18px;
            text-align: center;
            letter-spacing: 1px;
        }
        #reviewModal .modal-close {
            position: absolute;
            right: 18px;
            top: 16px;
            background: none;
            border: none;
            font-size: 22px;
            color: #aaa;
            cursor: pointer;
            transition: color 0.2s;
        }
        #reviewModal .modal-close:hover {
            color: #f5576c;
        }
        #reviewContent {
            font-size: 17px;
            color: #444;
            line-height: 1.7;
            margin-bottom: 10px;
        }
        #reviewModal .modal-label {
            color: #888;
            font-size: 15px;
            margin-right: 8px;
        }
        #reviewModal .modal-bottom-close {
            display: block;
            margin: 24px auto 0 auto;
            background: #f5f5f5;
            color: #5a3ec8;
            border: none;
            border-radius: 18px;
            padding: 8px 36px;
            font-size: 16px;
            font-weight: 500;
            cursor: pointer;
            transition: background 0.2s, color 0.2s;
        }
        #reviewModal .modal-bottom-close:hover {
            background: #e0e7ff;
            color: #333;
        }
        #orderDetailModal {
            display: none;
            position: fixed;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            background: #fff;
            border-radius: 18px;
            box-shadow: 0 8px 40px rgba(90,62,200,0.18), 0 1.5px 8px #b3a6e6;
            padding: 36px 32px 28px 32px;
            min-width: 320px;
            max-width: 90vw;
            min-height: 120px;
            z-index: 9999;
            animation: modalFadeIn 0.25s;
        }
        #orderDetailModal .modal-title {
            font-size: 22px;
            font-weight: 700;
            color: #5a3ec8;
            margin-bottom: 18px;
            text-align: center;
            letter-spacing: 1px;
        }
        #orderDetailModal .modal-close {
            position: absolute;
            right: 18px;
            top: 16px;
            background: none;
            border: none;
            font-size: 22px;
            color: #aaa;
            cursor: pointer;
            transition: color 0.2s;
        }
        #orderDetailModal .modal-close:hover {
            color: #f5576c;
        }
        #orderDetailContent {
            font-size: 17px;
            color: #444;
            line-height: 1.7;
            margin-bottom: 10px;
        }
        #orderDetailModal .modal-label {
            color: #888;
            font-size: 15px;
            margin-right: 8px;
        }
        #orderDetailModal .modal-bottom-close {
            display: block;
            margin: 24px auto 0 auto;
            background: #f5f5f5;
            color: #5a3ec8;
            border: none;
            border-radius: 18px;
            padding: 8px 36px;
            font-size: 16px;
            font-weight: 500;
            cursor: pointer;
            transition: background 0.2s, color 0.2s;
        }
        #orderDetailModal .modal-bottom-close:hover {
            background: #e0e7ff;
            color: #333;
        }
        .back-home-btn {
            display: inline-block;
            margin: 32px auto 0 48px;
            background: #f5f5f5;
            color: #5a3ec8;
            border: none;
            border-radius: 18px;
            padding: 8px 28px;
            font-size: 16px;
            font-weight: 500;
            text-decoration: none;
            cursor: pointer;
            transition: background 0.2s, color 0.2s;
            box-shadow: 0 2px 8px #e0d7f7;
        }
        .back-home-btn:hover {
            background: #e0e7ff;
            color: #333;
        }
    </style>
</head>
<body class="main-bg">
  <div class="main-card">
    <h2 class="main-title">订单管理</h2>
    <a href="adminindex.html" class="back-home-btn">返回首页</a>
    <table id="orderTable" class="main-table">
      <thead>
        <tr>
          <th>订单ID</th>
          <th>用户ID</th>
          <th>用户名</th>
          <th>房型ID</th>
          <th>房间号</th>
          <th>入住时间</th>
          <th>订单状态</th>
          <th>总金额</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody></tbody>
    </table>
  </div>
  <!-- 弹窗区域保留原样 -->
  <div id="reviewModal">
        <button class="modal-close" onclick="$('#reviewModal').hide()" title="关闭">&times;</button>
        <div class="modal-title">订单评价</div>
        <div id="reviewContent"></div>
        <button class="modal-bottom-close" onclick="$('#reviewModal').hide()">关闭</button>
    </div>
    <div id="orderDetailModal">
        <button class="modal-close" onclick="$('#orderDetailModal').hide()" title="关闭">&times;</button>
        <div class="modal-title">订单详情</div>
        <div id="orderDetailContent"></div>
        <button class="modal-bottom-close" onclick="$('#orderDetailModal').hide()">关闭</button>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
    <script>
        function loadOrders() {
            $.get('http://localhost:8080/api/order/listAll', function(data) {
                let html = '';
                // 状态映射
                var statusMap = { '0': '未入住', '1': '已入住', '2': '已退房', '3': '已取消' };
                data.forEach(function(o) {
                    html += `<tr>
                        <td>${o.orderId}</td>
                        <td>${o.userId}</td>
                        <td>${o.username || ''}</td>
                        <td>${o.roomTypeId}</td>
                        <td>${o.roomNumber || ''}</td>
                        <td>${o.checkInTime || ''}</td>
                        <td>${statusMap[o.orderStatus] || o.orderStatus}</td>
                        <td>${o.totalAmount || ''}</td>
                        <td>
                            <button class="order-btn" onclick="viewOrder('${o.orderId}')">详情</button>
                            <button class="order-btn" onclick="viewReview('${o.orderId}')">查看评价</button>
                        </td>
                    </tr>`;
                });
                $('#orderTable tbody').html(html);
            });
        }
        function viewOrder(orderId) {
            // 在本地orders数据中查找该订单
            var order = null;
            $('#orderTable tbody tr').each(function() {
                if ($(this).find('td').eq(0).text() === orderId) {
                    order = {
                        orderId: orderId,
                        userId: $(this).find('td').eq(1).text(),
                        username: $(this).find('td').eq(2).text(),
                        roomTypeId: $(this).find('td').eq(3).text(),
                        roomNumber: $(this).find('td').eq(4).text(),
                        checkInTime: $(this).find('td').eq(5).text(),
                        orderStatus: $(this).find('td').eq(6).text(),
                        totalAmount: $(this).find('td').eq(7).text()
                    };
                }
            });
            if (order) {
                // 订单状态映射
                var statusMap = { '0': '未入住', '1': '已入住', '2': '已退房', '3': '已取消' };
                var statusText = statusMap[order.orderStatus] || order.orderStatus;
                $('#orderDetailContent').html(
                    `<div><span class="modal-label">订单ID：</span>${order.orderId}</div>
                     <div><span class="modal-label">用户ID：</span>${order.userId}</div>
                     <div><span class="modal-label">用户名：</span>${order.username}</div>
                     <div><span class="modal-label">房型ID：</span>${order.roomTypeId}</div>
                     <div><span class="modal-label">房间号：</span>${order.roomNumber}</div>
                     <div><span class="modal-label">入住时间：</span>${order.checkInTime}</div>
                     <div><span class="modal-label">订单状态：</span>${statusText}</div>
                     <div><span class="modal-label">总金额：</span>${order.totalAmount}</div>`
                );
                $('#orderDetailModal').show();
            }
        }
        function viewReview(orderId) {
            $.ajax({
                url: 'http://localhost:8080/api/order/reviewByOrder',
                type: 'GET',
                data: {orderId: orderId},
                xhrFields: { withCredentials: true },
                success: function(review) {
                    if (review && review.reviewText) {
                        $('#reviewContent').html(
                            `<div><b>评分：</b>${review.rating || '无'}</div>
                             <div><b>内容：</b>${review.reviewText}</div>
                             <div><b>用户：</b>${review.username || ''}</div>`
                        );
                    } else {
                        $('#reviewContent').html('暂无评价');
                    }
                    $('#reviewModal').show();
                },
                error: function() {
                    $('#reviewContent').html('暂无评价');
                    $('#reviewModal').show();
                }
            });
        }
        loadOrders();
    </script>
    <style>
    .main-bg {
      min-height: 100vh;
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      padding: 0;
      margin: 0;
    }
    .main-card {
      background: #fff;
      border-radius: 24px;
      box-shadow: 0 8px 32px rgba(90,62,200,0.12);
      max-width: 1100px;
      margin: 60px auto 0 auto;
      padding: 40px 32px 32px 32px;
    }
    .main-title {
      font-size: 32px;
      font-weight: 800;
      color: #5a3ec8;
      margin-bottom: 18px;
      letter-spacing: 1px;
    }
    .main-table {
      width: 100%;
      border-collapse: separate;
      border-spacing: 0;
      border-radius: 16px;
      overflow: hidden;
      box-shadow: 0 2px 12px #e0d7f7;
      margin-top: 30px;
      background: #fafaff;
    }
    .main-table th, .main-table td {
      padding: 14px 10px;
      text-align: center;
    }
    .main-table th {
      background: #f5f5f5;
      color: #5a3ec8;
      font-weight: 700;
    }
    .main-table tr:nth-child(even) {
      background: #f7f3ff;
    }
    .main-table tr:hover {
      background: #e0e7ff;
    }
    .order-btn {
      background: linear-gradient(90deg, #764ba2 0%, #667eea 100%);
      color: #fff;
      border: none;
      border-radius: 12px;
      padding: 6px 20px;
      font-size: 15px;
      font-weight: 600;
      cursor: pointer;
      transition: background 0.2s, box-shadow 0.2s;
      box-shadow: 0 2px 8px #e0d7f7;
    }
    .order-btn:hover {
      background: linear-gradient(90deg, #a18cd1 0%, #fbc2eb 100%);
      color: #5a3ec8;
    }
    .back-home-btn {
      display: inline-block;
      margin: 18px 0 0 0;
      background: #f5f5f5;
      color: #5a3ec8;
      border: none;
      border-radius: 18px;
      padding: 8px 28px;
      font-size: 16px;
      font-weight: 500;
      text-decoration: none;
      cursor: pointer;
      transition: background 0.2s, color 0.2s;
      box-shadow: 0 2px 8px #e0d7f7;
    }
    .back-home-btn:hover {
      background: #e0e7ff;
      color: #333;
    }
    @media (max-width: 700px) {
      .main-card { padding: 18px 4vw; }
      .main-title { font-size: 22px; }
      .main-table th, .main-table td { padding: 8px 2px; }
    }
  </style>
</body>
</html> 